<template>
    <div class="login_container">
        <!-- title: 对话框左上角的标题 v-model:控制对话框显示与隐藏 -->
        <el-dialog v-model="useStore.visiable" title="用户登录" @close="close">
            <!-- 对话框身体部分解构 -->
            <div>
                <el-row>
                    <el-col :span="12">
                        <div class="login">
                            <!--  v-show="scence == 0" 手机号登录-->
                            <div v-show="scence == 0">
                                <el-form :model="loginParam" :rules="rules" ref="form">
                                    <el-form-item prop="phone">
                                        <el-input placeholder="请输入手机号码" :prefix-icon="User" v-model="loginParam.phone"
                                            pattern></el-input>
                                    </el-form-item>

                                    <el-form-item prop="code">
                                        <el-input placeholder="请输入手机验证码" :prefix-icon="Lock"
                                            v-model="loginParam.code"></el-input>
                                    </el-form-item>
                                    <el-form-item>
                                        <el-button :disabled="!isPhone || flag ? true : false" @click="getCode">
                                            <!--@getFlag="getFlag"  父给子传值  -->
                                            <CountDown v-if="flag" :flag="flag" @getFlag="getFlag" />
                                            <span v-else>获取验证码</span>
                                        </el-button>
                                    </el-form-item>
                                </el-form>
                                <el-button style="width: 100%" type="primary" size="default"
                                    :disabled="!isPhone || loginParam.code.length !== 6 ? true : false" @click="login"
                                    ref="dialog">用户登录</el-button>
                                <div class="bottom" @click="changeScene">
                                    <div class="bottom_first">
                                        <p>微信扫码登录</p>
                                        <svg t="1697182900220" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                            xmlns="http://www.w3.org/2000/svg" p-id="4054" width="32" height="32">
                                            <path
                                                d="M511.857 0.379C229.304 0.379 0 229.274 0 511.559s229.304 511.181 511.857 511.181c282.572 0 511.774-228.894 511.774-511.18S794.43 0.379 511.857 0.379z m-90.4 631.603c-27.34 0-49.315-5.56-76.697-10.957l-76.554 38.35 21.883-65.813c-54.794-38.247-87.624-87.593-87.624-147.63 0-104.06 98.601-186 218.983-186 107.653 0 201.973 65.444 220.938 153.57a189.676 189.676 0 0 0-21.084-1.28c-104.028 0-186.163 77.516-186.163 173.076 0 15.872 2.478 31.201 6.758 45.834a257.213 257.213 0 0 1-20.45 0.86l0.01-0.01z m322.991 76.616l16.486 54.681-60.047-32.87c-21.914 5.489-43.91 10.977-65.72 10.977-104.192 0-186.235-71.117-186.235-158.7 0-87.449 82.043-158.709 186.235-158.709 98.355 0 186 71.26 186 158.71 0 49.316-32.748 93.01-76.719 125.91z"
                                                fill="#46BB36" p-id="4055"></path>
                                            <path
                                                d="M317.44 378.88a30.72 30.72 0 1 0 61.44 0 30.72 30.72 0 0 0-61.44 0zM552.96 537.6a25.6 25.6 0 1 0 51.205-0.005 25.6 25.6 0 0 0-51.205 0.005z m-81.92-158.72a30.72 30.72 0 0 0 61.44 0.061v-0.056a30.72 30.72 0 0 0-30.72-30.72 30.71 30.71 0 0 0-30.72 30.715z m204.8 158.72a25.6 25.6 0 1 0 51.205-0.005 25.6 25.6 0 0 0-51.205 0.005z"
                                                fill="#46BB36" p-id="4056"></path>
                                        </svg>
                                    </div>
                                </div>
                            </div>
                            <!--  v-show="scence == 1" 微信登录-->
                            <div class="webcat" v-show="scence == 1">
                                <!-- 在这个容器中显示微信扫码登录页面 -->
                                <div id="login_container"></div>
                                <div class="phone" @click="handler">
                                    <p>手机短信验证码登录</p>
                                    <svg t="1697869381235" class="icon" viewBox="0 0 1292 1024" version="1.1"
                                        xmlns="http://www.w3.org/2000/svg" p-id="7101" width="32" height="32">
                                        <path
                                            d="M573.26802 0C290.503569 0 61.339678 229.163891 61.339678 512.071659S290.503569 1024 573.26802 1024s511.928341-229.163891 511.928341-511.928341S856.03247 0 573.26802 0z m159.941777 749.977887c0 13.471798-12.755213 24.363891-28.23345 24.36389H441.559692c-15.478237 0-28.23345-10.892092-28.23345-24.36389V274.022113c0-13.471798 12.755213-24.363891 28.23345-24.36389H705.119664c15.478237 0 28.23345 10.892092 28.23345 24.36389l-0.143317 475.955774z"
                                            fill="#1296db" p-id="7102"></path>
                                        <path
                                            d="M573.26802 717.588244c-10.462141 0-18.774528 7.309167-18.774528 16.194821 0 9.028971 8.455703 16.194822 18.774528 16.194822s18.774528-7.309167 18.774527-16.194822c0-8.885654-8.312386-16.194822-18.774527-16.194821zM450.875297 298.242687h-9.315605v394.981666h263.416655V298.242687h-9.315605z"
                                            fill="#1296db" p-id="7103"></path>
                                    </svg>
                                </div>
                            </div>
                        </div>
                    </el-col>
                    <!-- 右边扫码关注下载部分 -->
                    <el-col :span="12">
                        <div class="rightContent">
                            <div class="top">
                                <div class="item">
                                    <img src="../../assets/images/Followed.png" alt="">
                                    <svg t="1697183905558" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                        xmlns="http://www.w3.org/2000/svg" p-id="4041" width="16" height="16">
                                        <path d="M0 0 1024 0 0 0Z" p-id="4042"></path>
                                        <path d="M0 963.776 1024 963.776 0 963.776Z" p-id="4043"></path>
                                        <path d="M0 903.488 1024 903.488 0 903.488Z" p-id="4044"></path>
                                        <path d="M0 843.264 1024 843.264 0 843.264Z" p-id="4045"></path>
                                        <path d="M0 782.976 1024 782.976 0 782.976Z" p-id="4046"></path>
                                        <path d="M0 722.752 1024 722.752 0 722.752Z" p-id="4047"></path>
                                        <path d="M0 662.528 1024 662.528 0 662.528Z" p-id="4048"></path>
                                        <path d="M0 602.24 1024 602.24 0 602.24Z" p-id="4049"></path>
                                        <path d="M0 542.016 1024 542.016 0 542.016Z" p-id="4050"></path>
                                        <path d="M0 481.984 1024 481.984 0 481.984Z" p-id="4051"></path>
                                        <path d="M0 421.76 1024 421.76 0 421.76Z" p-id="4052"></path>
                                        <path d="M0 361.472 1024 361.472 0 361.472Z" p-id="4053"></path>
                                        <path d="M0 301.248 1024 301.248 0 301.248Z" p-id="4054"></path>
                                        <path d="M0 241.024 1024 241.024 0 241.024Z" p-id="4055"></path>
                                        <path d="M0 180.736 1024 180.736 0 180.736Z" p-id="4056"></path>
                                        <path d="M0 120.512 1024 120.512 0 120.512Z" p-id="4057"></path>
                                        <path d="M0 60.224 1024 60.224 0 60.224Z" p-id="4058"></path>
                                        <path d="M0 1024 1024 1024 0 1024Z" p-id="4059"></path>
                                        <path d="M0 0 0 1024 0 0Z" p-id="4060"></path>
                                        <path d="M963.776 0 963.776 1024 963.776 0Z" p-id="4061"></path>
                                        <path d="M903.488 0 903.488 1024 903.488 0Z" p-id="4062"></path>
                                        <path d="M843.264 0 843.264 1024 843.264 0Z" p-id="4063"></path>
                                        <path d="M782.976 0 782.976 1024 782.976 0Z" p-id="4064"></path>
                                        <path d="M722.752 0 722.752 1024 722.752 0Z" p-id="4065"></path>
                                        <path d="M662.528 0 662.528 1024 662.528 0Z" p-id="4066"></path>
                                        <path d="M602.24 0 602.24 1024 602.24 0Z" p-id="4067"></path>
                                        <path d="M542.016 0 542.016 1024 542.016 0Z" p-id="4068"></path>
                                        <path d="M481.984 0 481.984 1024 481.984 0Z" p-id="4069"></path>
                                        <path d="M421.76 0 421.76 1024 421.76 0Z" p-id="4070"></path>
                                        <path d="M361.472 0 361.472 1024 361.472 0Z" p-id="4071"></path>
                                        <path d="M301.248 0 301.248 1024 301.248 0Z" p-id="4072"></path>
                                        <path d="M241.024 0 241.024 1024 241.024 0Z" p-id="4073"></path>
                                        <path d="M180.736 0 180.736 1024 180.736 0Z" p-id="4074"></path>
                                        <path d="M120.512 0 120.512 1024 120.512 0Z" p-id="4075"></path>
                                        <path d="M60.224 0 60.224 1024 60.224 0Z" p-id="4076"></path>
                                        <path d="M1024 0 1024 1024 1024 0Z" p-id="4077"></path>
                                        <path
                                            d="M670.592 367.872c10.304 0 20.416 0.768 30.528 1.92-27.392-127.744-164.032-222.72-319.936-222.72C206.784 147.072 64 265.92 64 416.768c0 87.104 47.488 158.656 126.848 214.08l-31.68 95.36 110.848-55.552c39.68 7.872 71.488 15.936 111.104 15.936 9.92 0 19.776-0.576 29.568-1.28-6.208-21.248-9.792-43.52-9.792-66.496C400.96 480.32 519.936 367.872 670.592 367.872zM500.032 281.92c23.872 0 39.744 15.68 39.744 39.552 0 23.744-15.872 39.68-39.744 39.68-23.744 0-47.552-15.936-47.552-39.68C452.48 297.6 476.288 281.92 500.032 281.92zM278.08 361.216c-23.808 0-47.744-15.936-47.744-39.68 0-23.872 24-39.552 47.744-39.552S317.696 297.6 317.696 321.472C317.696 345.28 301.888 361.216 278.08 361.216z"
                                            p-id="4078"></path>
                                        <path
                                            d="M960 614.976c0-126.72-126.784-230.016-269.376-230.016-150.848 0-269.696 103.296-269.696 230.016 0 127.04 118.848 230.272 269.696 230.272 31.552 0 63.424-8 95.168-15.936l86.912 47.616-23.872-79.232C912.512 749.888 960 686.656 960 614.976zM603.2 575.424c-15.808 0-31.68-15.744-31.68-31.744 0-15.872 15.872-31.744 31.68-31.744 23.936 0 39.68 15.936 39.68 31.744C642.88 559.68 627.136 575.424 603.2 575.424zM777.6 575.424c-15.68 0-31.552-15.744-31.552-31.744 0-15.872 15.872-31.744 31.552-31.744 23.68 0 39.616 15.936 39.616 31.744C817.28 559.68 801.344 575.424 777.6 575.424z"
                                            p-id="4079">
                                        </path>
                                    </svg>
                                    <p>微信扫一扫关注</p>
                                    <p>“快速预约挂号”</p>
                                </div>
                                <div class="item">
                                    <img src="../../assets/images/dsuccessful.png" alt="">
                                    <svg t="1697184109126" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                        xmlns="http://www.w3.org/2000/svg" p-id="5572" width="16" height="16">
                                        <path
                                            d="M256 85.333333h512c64.8 0 117.333333 52.533333 117.333333 117.333334v618.666666c0 64.8-52.533333 117.333333-117.333333 117.333334H256c-64.8 0-117.333333-52.533333-117.333333-117.333334V202.666667c0-64.8 52.533333-117.333333 117.333333-117.333334z m0 64a53.333333 53.333333 0 0 0-53.333333 53.333334v618.666666a53.333333 53.333333 0 0 0 53.333333 53.333334h512a53.333333 53.333333 0 0 0 53.333333-53.333334V202.666667a53.333333 53.333333 0 0 0-53.333333-53.333334H256z m170.666667 618.666667a32 32 0 0 1 0-64h170.666666a32 32 0 0 1 0 64H426.666667z"
                                            fill="#000000" p-id="5573"></path>
                                    </svg>
                                    <p>微信扫一扫下载</p>
                                    <p>“预约挂号APP”</p>
                                </div>
                            </div>
                        </div>
                        <div class="tip">
                            <p>挂号官方指定平台</p>
                            <p>快速挂号 安全放心</p>
                        </div>
                    </el-col>
                </el-row>
            </div>
            <template #footer>
                <el-button type="primary" size="default" @click="close">关闭窗口</el-button>
            </template>
        </el-dialog>
    </div>
</template>

<script lang="ts" setup>
import { reactive, ref, computed } from "vue";
// 引入wx扫码登录参数请求
import { reqWxLogin } from '../../api/hospital'
// 获取user仓库的数据(visiable)可以控制login组件的对话框的显示与隐藏
import useUserStore from "../../store/modules/user";
import type { WXLoginResponseData } from '../../api/hospital/type'
import { User, Lock } from '@element-plus/icons-vue'
// 引入倒计时组件
import CountDown from '../countdown/index.vue'
import { ElMessage } from "element-plus";
import {useRouter,useRoute} from 'vue-router';
// 获取路由器对象
let $route = useRoute();
let $router = useRouter();

// 定义一个响应数据控制倒计时组件显示与隐藏
let flag = ref<boolean>(false); //flag如果为true 不显倒计时  为false显示倒计时
let useStore = useUserStore();
// 获取form组件实例
let form = ref<any>()
// 搜集表单数据--- 手机号码
let loginParam = reactive({
    phone: '',
    code: '',
    // token:''
});
// 计算出当前表单元素收集到的内容是否是手机号
let isPhone = computed(() => {
    // 手机号正则表达式
    const reg = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
    // 返回true为手机号 false表示不为手机号
    return reg.test(loginParam.phone);
})

let scence = ref<number>(0);//0代表收集号码登录 如果是1代表微信扫码登录
// 点击微信扫码登录|微信小图标切换为微信扫码登录
const changeScene = async () => {
    // 切换场景1
    scence.value = 1;
    // 发送请求获取二维码需要参数
    let redirect_URL = encodeURIComponent(window.location.origin + '/wxlogin');
    let result: WXLoginResponseData = await reqWxLogin(redirect_URL);
    // 生成二维码登录界面
    // @ts-ignore
    new WxLogin({
        self_redirect: true, //true 手机点击确认登陆后就可以在iframe内跳转到redirect_uri
        id: "login_container",//显示二维容器设置
        appid: result.data.appid,//应用位置标识appid
        scope: "snsapi_login",//当前微信扫码登陆页面已经授权
        redirect_uri: result.data.redirectUri,//填写授权回调域路径，就是用户授权成功后，微信服务器向公司后台推送
        state: result.data.state,//state就是学校服务器重定向地址携带用户信息
        style: "black",
        href: ""
    });
}
// 点击手机验短信验证码盒子回调
const handler = () =>{
    scence.value =0;
}
// 获取验证码按钮的回调
const getCode = () => {
    // 开启倒计时模式，倒计时组件显示出来
    flag.value = true;
    // 通知pinia仓库存储验证码
    useStore.getCode(loginParam.phone);
}
// 计数器组件绑定的自定义事件
//当倒计时为零的时候，通知父组件倒计时组件隐藏
const getFlag = (val: boolean) => {
    // 倒计时模式结束
    flag.value = val;
}
// 点击用户登录按钮回调
const login = async () => {
    // 保证表单校验的两项都符合条件
    await form.value.validate();
    // 发起登录请求
    // 登录请求成功：顶部组件需要展示用户名字、对话框关闭
    // 登录请求失败:弹出对应登陆失败的错误信息
    try {
        // 用户登录成功
        await useStore.userLogin(loginParam);
        //关闭对话框
        useStore.visiable = false;
        // 获取url的query参数
        let redirect = $route.query.redirect;
        if (redirect) {
            $router.push(redirect as string);
        } else {
            $router.push('/home');
        }
    } catch (error) {
        ElMessage({
            type: 'error',
            message: (error as Error).message
        })
    }

}
// 自定义校验规则：手机号码自定义校验规则
const validatorPhone = (rule: any, value: any, callBack: any) => {
    // rule:即为表单校验规则对象
    // value:即为当前文本的内容
    // callBack:回调函数
    const reg = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
    if (reg.test(value)) {
        callBack();
    } else {
        callBack(new Error('请输入正确的手机号码格式'))
    }
}
// 自定义校验规则：验证码自定义校验规则
const validatorCode = (rule: any, value: any, callBack: any) => {
    // rule:即为表单校验规则对象
    // value:即为当前文本的内容
    // callBack:回调函数
    if (/^\d{6}$/.test(value)) {
        callBack();
    } else {
        callBack(new Error('请输入正确的验证码'))
    }
}
// 表单校验的规则对象
const rules = {
    // 手机号校验规则
    // required：代表当前字段务必进行校验
    // message:代表的校验错误的提示信息
    // trigger:代表表单校验触发时机 change:文本发生变化进行校验 blur:失去焦点的时候触发校验
    // min:代表的是最小位数
    // max:代表的是最大的位置
    // phone:[{required:true,message:"手机号务必11位",trigger:'change',min:11}],
    // code:[{required:true,message:"验证码务必6位",trigger:"blur",min:6}]
    phone: [{ trigger: "change", validator: validatorPhone }],
    code: [{ trigger: "change", validator: validatorCode }]
}
// 清除表单信息和校验信息
const close = () => {
    // 清空搜集的数据
    Object.assign(loginParam, { phone: '', code: '' });
    // 清除上次校验的结果
    form.value.resetFields();
    //关闭对话框
    useStore.visiable = false;
}

</script>

<style lang="scss" scoped>
.login_container {
    :deep(.el-dialog__body) {
        border-top: 1px solid #ccc;
        border-bottom: 1px solid #ccc;
    }

    .login {
        padding: 20px;
        border: 1px solid #ccc;

        .webcat {
            display: flex;
            flex-direction: column;
            align-items: center;

            .phone {
                display: flex;
                flex-direction: column;
                align-items: center;

                p {
                    margin: 10px 0;
                }
            }
        }
    }

    .bottom {
        .bottom_first {
            display: flex;
            flex-direction: column;
            align-items: center;

            p {
                margin: 10px 0px;
            }
        }

    }

    .rightContent {
        .top {
            display: flex;
            justify-content: space-around;

            .item {
                display: flex;
                flex-direction: column;
                align-items: center;

                img {
                    width: 130px;
                    height: 130px;
                }

                p {
                    margin: 5px 0px;
                }
            }
        }
    }

    .tip {

        p {
            text-align: center;
            margin: 20px 0px;
            font-size: 20px;
            font-weight: 900;
        }

    }
}</style>